<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Basemap Toggle</title>
    <link rel="stylesheet" href="/js/arcgisjsapi/3.33/3.33/esri/css/esri.css">
    <style>
        html, body, #map {
            padding:0;
            margin:0;
            height:100%;
        }
        #BasemapToggle {
            position: absolute;
            top: 20px;
            right: 20px;
            z-index: 50;
        }
    </style>
    <script src="/js/arcgisjsapi/3.33/3.33/init.js"></script>
    <script src="/js/arcgisjsapi/3.33/3.33/"></script>

    <script>
        try {


            var map;
            require([
                "esri/map",
                "esri/dijit/BasemapToggle",
                "dojo/domReady!"
            ], function (
                Map, BasemapToggle
            ) {

                var startExtent = new Extent(116.68147124900013,
                    30.952928500053087,117.95934679400014,32.54131689900006,
                    new SpatialReference({ wkid:4326 }));
                map = new Map("map", {
                    center: [-70.6508, 43.1452],
                    zoom: 16,
                    basemap: "topo"
                });

               // map.setExtent(startExtent);

                var toggle = new BasemapToggle({
                    map: map,
                    basemap: "satellite"
                }, "BasemapToggle");
                toggle.startup();

            });
        }catch (e) {

        }
    </script>
</head>
<body>
<div id="map" class="map" style="width: 300px;height: 400px">
    <div id="BasemapToggle"></div>
</div>
</body>
</html>